<!DOCTYPE html>
<html>

<head>
    <script src="intelxdk.js"></script>
    <script src="cordova.js"></script>
    <script src="xhr.js"></script>
    
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<style type="text/css">
    
@media screen and (orientation:portrait) {
    .buttonmain{
        height:400px;
        line-height:85px;
    }

    h1{
        text-align: center;
        margin-top:2%;
        margin-bottom: 2%;
        color: white;
    }

    .wrapper{
        margin-bottom: 10%;
        margin-top: 20%;
    }
}
@media screen and (orientation:landscape) {  
    .buttonmain{
	   height:10%;
       line-height:40px;
    }
    
    html, body{
        max-height: 100vh;
        max-width: 100vw;
    }

    h1{
        text-align: center;
        margin-top:2%;
        margin-bottom: 2%;
        color: white;
    }

    .wrapper{
        max-height: 100vh;
        max-width: 100vw;
    }
}
</style>

</head>    
    
<body>
    
    
  <h1>Store</h1>  
    <div class="wrapper">
        <button type="button" class="buttonMain" onclick="window.location='#'" >What's New?</button>  
        <button type="button" class="buttonMain" onclick="window.location='#'" >Customizations</button>  
        <button type="button" class="buttonMain" onclick="window.location='#'" >Upgrades</button>  
        <button type="button" class="buttonMain" onclick="window.location='#'" >Credits</button>  
    </div>
</body>
</html>
